<template>
  <div id="app" class="tabbar-content">
    <div class="tab">
      <div class="tab-cli normal">
        <icons iconName="icon-shouye2" />
        <p>首页</p>
      </div>
      <div class="tab-cli special">
        <div class="lock">
          <icons iconName="icon-suo-dakai" />
        </div>
      </div>
      <div class="tab-cli normal">
        <icons iconName="icon-a-wode1x" />
        <p>我的</p>
      </div>
    </div>
    <!-- <span class="iconfont" :class="iconName"></span> -->
  </div>
</template>


<script>
import icons from "@/components/icon/index";
export default {
  name: "tabbar",
  components: {
    icons,
  },
  props: {},
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss">
.tabbar-content {
    z-index: 101;
  width: 100%;
  height: 16vw;
  position: fixed;
  bottom: 0;
  .tab {
    display: flex;
    height: 16vw;
    background: #ffffff;
    .tab-cli {
      width: calc(100% / 3);
    }

    .normal {
      color: #777777;
      text-align: center;
      padding-top: 2vw;
      .icon-content {
        .iconfont {
          font-size: 6vw;
        }
      }

      p {
        font-size: 4vw;
        margin: 2vw 0;
      }
    }

    .special {
      .lock {
        bottom: 8vw;
        left: 0;
        right: 0;
        //top: 0;
        position: absolute;
        margin: 0 auto;
        display: flex;
        align-items: center;
        height: 15vw;
        width: 15vw;
        border-radius: 50%;
        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.13);
        background: #ffffff;
        .icon-content {
          margin: 0 auto;
          .iconfont {
            background: #ffffff;
            font-size: 8vw;
            color: #4a6dfe;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
